import { Popup } from '@nutui/nutui-react-taro'
import { ScrollView, Text, View } from '@tarojs/components'
import React from 'react'
import './index.less'

export interface SelectionModalProps {
  /** 是否显示 */
  visible: boolean
  /** 标题 */
  title: string
  /** 关闭回调 */
  onClose: () => void
  /** 高度 */
  height?: string
  /** 内容 */
  children: React.ReactNode
  /** 是否需要滚动（垂直） */
  scrollable?: boolean
  /** 滚动方向 */
  scrollDirection?: 'vertical' | 'horizontal'
  /** 打开时的回调 */
  onOpen?: () => void
  /** 自定义主题色 */
  primaryColor?: string
}

/**
 * SelectionModal 通用选择模态框组件
 * 用于统一管理所有选择类型的弹窗
 */
const SelectionModal: React.FC<SelectionModalProps> = ({
  visible,
  title,
  onClose,
  height = '60vh',
  children,
  scrollable = true,
  scrollDirection = 'vertical',
  onOpen,
}) => {
  return (
    <Popup visible={visible} position='bottom' onClose={onClose} onOpen={onOpen} style={{ height }}>
      <View className='selection-modal'>
        {/* Header */}
        <View className='selection-modal-header'>
          <Text className='selection-modal-title'>{title}</Text>
          <View className='selection-modal-close' onClick={onClose}>
            ✕
          </View>
        </View>

        {/* Body */}
        {scrollable ? (
          <ScrollView
            className='selection-modal-body'
            scrollY={scrollDirection === 'vertical'}
            scrollX={scrollDirection === 'horizontal'}>
            {children}
          </ScrollView>
        ) : (
          <View className='selection-modal-body'>{children}</View>
        )}
      </View>
    </Popup>
  )
}

export default SelectionModal
